<!--
 * @Author: zqg
 * @Date: 2021-01-12 22:22:39
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-09 22:11:25
 * @Description: 详情工资
-->
<template>
  <base-layout :visibleContent="true" :visibleContent2="true">
    <template #searchPanel>
      <el-row>
        <el-col>绩效规则基础信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-col :span="4">
        <div class="head">
          <img class="head-img" :src="employeesInfo.headPortrait" alt="" />
          <div class="head-tip">头像预览</div>
        </div>
      </el-col>
      <el-col :span="20">
        <el-form
          :inline="true"
          ref="fromdata"
          :model="employeesInfo"
          :rules="rules"
          label-width="120px"
          label-position="right"
        >
          <el-col :span="6">
            <el-form-item label="员工姓名:">
              <span>{{ employeesInfo.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入职时间:">
              <span>{{ employeesInfo.entryTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任职门店:">
              <span>{{ employeesInfo.storeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职位:">
              <span>{{ employeesInfo.roleNames }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="薪资:">
              <span>{{ employeesInfo.baseSalary }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="员工编号:">
              <span>{{ employeesInfo.code }}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </template>
    <template #contentPanel>
      <el-row>
        <el-col>绩效列表信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="false"
        :page-sizes="pageSizes"
        :table-column-attributes="performanceTableColumn"
        :isShowSerialNum="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #allNum>
          <div>
            绩效提成金额：<span class="money">¥{{ jxAmount }}</span>
          </div>
        </template>
      </data-table>
    </template>
    <template #contentPanel2>
      <el-row>
        <el-col>考勤列表信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <attendance-table :userId="userId">
        <template #allNum>
          <div>
            考勤扣除金额：<span class="money">¥{{ kqAmount }}</span>
          </div>
        </template>
      </attendance-table>
      <div class="sum">
        总发放工资：<span class="money"
          >¥{{ employeesInfo.baseSalary + jxAmount + kqAmount }}</span
        >
      </div>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { getUserId } from '@/api/after-sale/personnel/index'
import { getAttendanceTableColumn } from '@/utils/attendance'
import { page } from '@/api/after-sale/personnel/employeePerformance'
import attendanceTable from '../attendance/components/attendanceTable.vue'
export default {
  components: { attendanceTable },
  mixins: [
    baseMixin({
      findData: page,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      // 用户id
      userId: '',
      pageSize: 3,
      pageSizes: [3],
      // 绩效表头配置
      performanceTableColumn: [
        { name: '工单号', value: 'orderNo', type: 'text' },
        { name: '项目', value: 'projectType', type: 'text' },
        { name: '项目提成', value: 'commissionAmount', type: 'text' },
        { name: '工时', value: 'workHours', type: 'text' },
        { name: '业绩日期', value: 'createTime', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' },
        { name: '审核状态', value: 'status', type: 'text' }
      ],
      // 员工信息
      employeesInfo: {
        name: 'name'
      },
      // 绩效金额
      jxAmount: 0,
      // 考勤金额
      kqAmount: 0,
      rules: {}
    }
  },
  computed: {
    // 表格配置
    tableColumnAttributes() {
      return getAttendanceTableColumn(this.currentType)
    }
  },
  created() {
    const query = this.$route.query
    this.userId = query.userId || 0
    this.jxAmount = query.jxAmount || 0
    this.kqAmount = query.kqAmount || 0
    this.getUserInfo()
  },
  methods: {
    /**
     * @description: 获取用户信息
     * @param {*}
     * @return {*}
     */
    getUserInfo() {
      getUserId(this.userId).then(res => {
        const { data } = res
        if (data) {
          this.employeesInfo = res.data || {}
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  text-align: center;
  .head-img {
    width: 120px;
    height: 120px;
    border-radius: 100px;
  }
  .head-tip {
    margin-top: 10px;
  }
}
.money {
  color: rgba(228, 57, 60, 100);
  font-size: 28px;
}
.sum {
  margin-top: 20px;
  text-align: right;
}
.types {
  text-align: right;
  .active-btn {
    background-color: #00a1ec;
    color: #ffffff;
  }
}
</style>
